.fui-table
  display: block
  font-size: 0.875rem

  &.fui-table-outline
    border: 1px solid $border-default

    .fui-table-head
      border-top: 0

    .fui-table-row:last-child
      border-bottom: 0

  &-head
    display: flex
    background-color: $table-head-bg
    border-top: 1px solid $table-border-color
    border-bottom: 1px solid $table-border-color
    color: $text-mute
    height: 40px
    min-height: 40px

    &-cell, > div
      display: flex
      align-items: center
      padding: 0.5rem 0.75rem
      line-height: 1rem

    &-cell
      > svg
        flex-shrink: 0
        cursor: pointer

        &.asc
          transition: .3s
          transform: rotate(180deg)

  &-row
    display: flex
    align-items: center
    background: $bg-body
    color: $text-default
    border-bottom: 1px solid $table-border-color
    min-height: 48px

    &:hover
      background: $bg-hover-mute

    &.active
      background: $primary-menu-active
      border-left: 2px solid $brand-primary

  // 单元格
  &-row > div,
  &-row > .fui-table-cell
    padding: 0.5rem 0.75rem
    line-height: 1.5rem

  // checkbox勾选框
  .fui-table-select-column
    display: flex
    align-items: center
    width: 2rem
    padding: 0.5rem 0
    padding-left: 0.75rem
    line-height: 1.5rem

  &-head,
  &-row
    .fui-table-select-column
      .fui-checkbox.hide
        display: none

      .input-checkbox
        height: 1rem

  &-no-content-slogan
    text-align: center
    padding: 2rem 0
    flex: 1

  &.loading
    position: relative

    // 只有当前表格中还没有数据的时候，才指定最小高度
    &.empty
      min-height: 10rem

    > *:not(.fui-table-loading)
      filter: blur(2px)

    .fui-table-loading
      @include flex-xy-center
      position: absolute
      width: 100%
      height: 100%
      top: 0
      left: 0
      background: $bg-disabled
      opacity: 0.3

      > .fui-icon
        fill: $brand-primary

.fui-table-scroll-body
  display: block
  overflow-y: scroll


.fui-table-tree

  &.fui-table
    padding-left: 5rem

  .fui-table

    &-head
      position: relative
      border-top: none
      background: $bg-body
      color: $brand-info

      > div
        padding: 0.5rem 0.75rem

      &:after
        position: absolute
        top: 0
        left: -2.5rem
        content: ""
        height: 3.75rem
        border-left: 3px dotted $border-default

    &-row
      position: relative
      border: none

      &:last-child:after
        height: 0

      &:hover
        background: $bg-body

      > div
        padding: 0.5rem 0.75rem

      &:after
        position: absolute
        top: 1.25rem
        left: -2.5rem
        content: ""
        height: 100%
        width: 2rem
        border-left: 3px dotted $border-default
        border-top: 3px dotted $border-default

  &-no-data
    position: relative
    padding-left: 5.75rem
    line-height: 2.5rem

    &:after
      position: absolute
      top: 0
      left: 2.5rem
      content: ""
      height: 1.5rem
      width: 2rem
      border-left: 3px dotted $border-default
      border-bottom: 3px dotted $border-default
